<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
		<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
		<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
		<link href="${s.base}/pc/css/swiper.min.css" rel="stylesheet">
		<link href="${s.base}/pc/css/weWeb.css" rel="stylesheet" />
		<link href="${s.base}/pc/js/num.css" rel="stylesheet" />
	</head>
	<body>
		<div class="w1200 we-head clearfix">
			<div class="we-head-logo"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.logoPath}"></div>
			<div class="we-head-nav">
				<ul>
					<li class="checked" onclick="goFistPage()">首页</li>
					<li onclick="goCaseListPage()">案例</li>
					<li onclick="goProductListPage()">应用中心</li>
					<li onclick="goAboutUsPage()">关于我们</li>
					<#if sysUser?? >
					<li onclick="goMyIndexPage()">控制中心</li>
					</#if>
				</ul>
			</div>
			<#if sysUser?? >
			<div class="we-head-logined">
				<div class="user-updown ellipsis"><i class="cytfonts">&#xe6a2;</i></div>
				<div class="user-name ellipsis">${sysUser.name}</div>
				<div class="user-Avatar"><img src="/sysFile/showFileByObjectId?objectId=${sysUser.headLogo}"></div>
				<div class="user-txt-list" style="display:none;">
					<ul>
						<li>个人中心</li>
						<li>退出</li>
					</ul>
				</div>
			</div>
			<#else>
			<div class="we-head-loginbtn">
				<span><a href="/login">登录</a></span>
			</div>
			</#if>

		</div>
		<div class="we-banner">
			 <!-- Swiper -->
			  <div class="swiper-container">
				<div class="swiper-wrapper">
					<#if bannerList?? && (bannerList?size > 0) >
					<#list bannerList as p>
						<#if p.url?? && p.url!="">
						<div onClick="goBannerUrl('${p.url}')" class="swiper-slide" style="background: url(/sysFile/showFileByPath?path=${p.path}) top center no-repeat;background-size:auto 100%;"></div>
						<#else>
						<div class="swiper-slide" style="background: url(/sysFile/showFileByPath?path=${p.path}) top center no-repeat;background-size:auto 100%;"></div>
						</#if>
					</#list>
				    <#else>
				  		<div class="swiper-slide" style="background: url(${s.base}/pc/images/banner.png) top center no-repeat;background-size:auto 100%;"></div>
				    </#if>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			  </div>
		</div>
		<div class="middle-tit1">
			<h1>微信应用为不同行业提供功能需求</h1>
			<h2>各种场景、行业应用，为需求而生，一键定制，精准营销</h2>
		</div>
		<div class="we-products clearfix">
			<ul>
				<#list wxApplyUseList as wxApplyUse>
					<li>
						<div class="div-pro">
							<img src="/sysFile/showFileByObjectId?objectId=${wxApplyUse.coverImage}">
							<div class="balck-top-zz">${wxApplyUse.name}</div>
						</div>
						<div class="div-pro-txt ellipsis2">${wxApplyUse.description}</div>
						<div class="div-pro-name">${wxApplyUse.name}</div>
					</li>
				</#list>
			</ul>
		</div>
		<div class="middle-tit2">微信应用核心功能</div>
		<div class="we-feat clearfix">
			<ul>
				<li><i class="cytfonts">&#xe63b;</i><h1>失物招领</h1></li>
				<li><i class="cytfonts">&#xe65c;</i><h1>打赏功能</h1></li>
				<li><i class="cytfonts">&#xe625;</i><h1>推荐好友</h1></li>
				<li><i class="cytfonts">&#xeb0d;</i><h1>文章发布</h1></li>
				<li><i class="cytfonts">&#xe645;</i><h1>微信搜索</h1></li>
				<li><i class="cytfonts">&#xe665;</i><h1>线上支付</h1></li>
				<li><i class="cytfonts">&#xe601;</i><h1>公众号主页</h1></li>
				<li><i class="cytfonts">&#xe619;</i><h1>资产报修</h1></li>
				<li><i class="cytfonts">&#xe62d;</i><h1>问卷调查</h1></li>
				<li><i class="cytfonts">&#xe60d;</i><h1>游戏互动</h1></li>
				<li><i class="cytfonts">&#xe600;</i><h1>线下扫码</h1></li>
				<li><i class="cytfonts">&#xe63b;</i><h1>一键分享</h1></li>
			</ul>
		</div>
		<div class="we-case">
			<div class="w1200 clearfix">
				<div class="middle-tit3">
					<h1>微信应用案例</h1>
					<h2>不管你处于什么行业，微信应用已定制多套解决方案，助你轻松玩转微信营销</h2>
				</div>
				<div class="case-list-name">
					<ul>
						<#list categoryList as category>
						<li data-id="${category.id}" <#if category_index == 0> class="checked"</#if>>${category.name}</li>
						</#list>
					</ul>
				</div>
				<div class="case-list-ctn" id="caseListShow">
					<div class="case-list-play clearfix">
						<div style="width: 100%;height:100%">
						<ul>
							<#list websiteApplicationList as websiteApplication>
							<li <#if websiteApplication_index == 0> class="checked"</#if> data-description="${websiteApplication.description}">
								<div class="case-pic"><img src="/sysFile/showFileByPath?path=${websiteApplication.path}"></div>
								<h1>${websiteApplication.name}</h1>
							</li>
							</#list>
						</ul>
					</div>
						<div class="div-label">应用案例介绍</div>
						<div class="div-txt" id="applicationDescription">${websiteApplication.description}</div>
						<div class="more-btn" onclick="goCaseListPage()">查看更多</div>
					</div>
				</div>
			</div>
		</div>
		<div class="w1200 clearfix">
			<div class="middle-tit4">
				<h1>新闻资讯</h1>
				<h2>New Information</h2>
			</div>
			<div class="we-new-pic"><img src="${s.base}/pc/images/bz.png"></div>
			<div class="we-new-right">
				<div class="we-new-tit">
					<h1>行业新闻快报</h1>
					<h2>INDUSTRY NEWS</h2>
					<div class="more-link" onclick="goNewsCenterPage()">查看全部</div>
				</div>
				<#list newsList as news>
					<div class="div-new-line checked" onclick="goNewsDetailPage('${news.id}')">
						<h1 class="ellipsis">${news.name}</h1>
						<p class="ellipsis2">${news.description}</p>
						<div class="square-bar">
							<div class="date-time">${news.createTime?string('dd')}</div>
							<div class="year-time">${news.createTime?string('yyyy-MM')}</div>
						</div>
					</div>
				</#list>
			</div>
		</div>
		<div class="we-dt">
			<div class="w1200">
				<div class="middle-tit5">
					<h1>遍布全国的销售网络提供本地化的服务</h1>
					<h2>无论你身在何处，均能微信应用在线服务体验</h2>
				</div>
				<div class="circle-line">
					<h1>800+</h1>
					<h2>服务商</h2>
					<div class="jxbar">
						<div class="topcircle"></div>
						<div class="topcircle"></div>
					</div>
				</div>
				<div class="circle-line">
					<h1>7*24h</h1>
					<h2>优质服务</h2>
					<div class="jxbar">
						<div class="topcircle"></div>
						<div class="topcircle"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="we-bot-foot">
			<div class="w1200 clearfix">
				<div class="bot-nav-left clearfix">
					<#list friendlyLinkCodeList as friendlyLinkCode>
					<dl>
						<dt class="ellipsis">${friendlyLinkCode.codeName}</dt>
						<#list friendlyLinkCode.friendlyLinkList as friendlyLink>
						<dd class="ellipsis">${friendlyLink.name}</dd>
						</#list>
					</dl>
					</#list>
				</div>
				<div class="bot-tel-mid">
					<h1>合作咨询热线</h1>
					<h2 class="ellipsis">${websiteConfiguration.telephone}</h2>
					<div class="adv-btn">在线咨询</div>
					<div class="adv-pic">
						<img src="${s.base}/pc/images/kf.png">
					</div>
				</div>
				<div class="bot-ewm-rig clearfix">
					<ul>
						<li><div class="ewm"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.followPath}"></div><h1>扫一扫关注我们</h1></li>
						<li><div class="ewm"><img src="/sysFile/showFileByPath?path=${websiteConfiguration.interactPath}"></div><h1>扫一扫一起互动</h1></li>
					</ul>
				</div>
			</div>
			<div class="bot-div-line">地址：${websiteConfiguration.companyAddress}&nbsp;&nbsp;电话：${websiteConfiguration.phone}&nbsp;&nbsp;邮箱：${websiteConfiguration.mailbox}<br>
			${websiteConfiguration.recordNo}
							</div>
		</div>
	</body>
	<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/pc/js/jquery-2.1.4.min.js" type="text/javascript"></script>
	<script src="${s.base}/pc/js/swiper.min.js" type="text/x-javascript"></script>
	<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="${s.base}/pc/js/base.js" type="text/x-javascript"></script>
	<script>
		var categoryId = '${categoryId}';
        layui.use(['jquery', 'dialog', 'baseutil'], function () {
            var $ = layui.jquery,
                dialog = layui.dialog,
                baseutil = layui.baseutil;

            $('.user-txt-list li').bind('click', function () {
                if ($(this).index() === 0) {
                    window.open('/web/personalEdit', '_self')
                } else if ($(this).index() === 1) {
                    dialog.confirm("确定要退出吗？", function () {
                        baseutil.AjaxGetMark("/webExit", "", function () {
                            window.location.href = "/web/index";
                        });
                    });
                }
            });
        });
		$(function(){
			var swiper = new Swiper('.swiper-container', {
			  slidesPerView: 1,
			  spaceBetween:0,
			  loop: true,
			  autoplay:true,
			  pagination: {
				el: '.swiper-pagination',
				clickable: true,
			  },
			  navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			  },
			});
			$(".we-head-nav ul li").bind("click",function(){
				$(".we-head-nav ul li").removeClass("checked");
				$(this).addClass("checked");
			})
			$(".we-products ul li").hover(function(){
				$(".we-products ul li").removeClass("checked");
				$(this).addClass("checked");
			})
			// 应用案例
			$(".case-list-name li").hover(function(){
				$(".case-list-name ul li").removeClass("checked");
				$(this).addClass("checked");
			})
			$(".case-list-play ul li").bind("click",function(){
                $(".case-list-play ul li").removeClass("checked");
                $(this).addClass("checked");
                // 应用案例
				var description = $(this).attr("data-description");
				$("#applicationDescription").html(description);
			})

            $(".case-list-name li").on("click",function(){
                $(".case-list-name ul li").removeClass("checked");
                $(this).addClass("checked");
                // 切换右边数据
				var newCategoryId = $(this).attr("data-id");
                caseShow(newCategoryId);
            })

			$(".div-new-line").hover(function(){
				$(".div-new-line").removeClass("checked");
				$(this).addClass("checked");
			})

            $(".we-head-logined").mouseover(function(){
                $(".user-txt-list").show();
                $(this).find(".user-updown").addClass("Rotate180")
            });

            $(".we-head-logined").mouseout(function(){
                $(".user-txt-list").hide();
                $(this).find(".user-updown").removeClass("Rotate180")
            });
		
		})

        function caseShow(newCategoryId) {
		    if (!categoryId || newCategoryId == categoryId) {
		        return;
			}
            categoryId = newCategoryId;
            $.get("/web/websiteapplication/queryWebsiteApplicationList", {"categoryId":categoryId}, function (result) {
                var applicationList = result.data;
                var str ='';
                if (applicationList != null && applicationList.length > 0) {
                    str += '<div class="case-list-play clearfix"><div style="width: 100%;height:100%"><ul>';
					for(var i = 0; i < applicationList.length; i++) {
					    str+='<li><div class="case-pic"><img src="/sysFile/showFileByPath?path='+applicationList[i].path+'"></div><h1>'+applicationList[i].name+'</h1></li>';
					}
					str += '</div></ul>\
					<div class="div-label">应用案例介绍</div>\
					<div class="div-txt">'+applicationList[0].description+'</div>\
					<div class="more-btn" onclick="goCaseListPage()">查看更多</div>\
					</div>';
                }
                $("#caseListShow").html(str);
            });
        }
	</script>
</html>
